D3 序数比例尺

序数比例尺（Ordinal Scale）所定义的定义域都是离散且不会连续的，即为序数比例尺，通常是在场景中最为常用的比例尺之一，如通过输入一个离散值来获取得到另一个离散的值，我们就可以通过使用序数比例尺来实现。

rangePoints()

1
2
3
4
5
6
7
8

var ordinal = d3.scale.ordinal()
	.domain([1,2,3])
	.range([10,20,30])

console.log(ordinal(1))
console.log(ordinal(2))
console.log(ordinal(3))
console.log(ordinal(4))

在上述的code中，当定义域内数据大于值域时，那么多出的定义域值将会重新轮回一遍值域为止。但此方法来定义值域或许有些麻烦，所以我们可以通过使用rangePoints()来解决：

1
2
3
4
5
6

var ordinal = d3.scale.ordinal()
	.domain([1,2,3,4,5])
	.rangePoints([0,1000])

console.log(ordinal.range())
console.log(ordinal(2))

通常，我们使用rangePoints(interval,padding)，其中interval为[0,200]，而padding是一个缺省值，之后计算得出step是根据定义域与数值计算得到的值，因为我们并没有设置padding，所以间距默认为50，而计算出的值就是圆的对应点。：

1
2
3
4
5

var ordinal = d3.scale.ordinal()
	.domain([1,2,3,4,5])
	.rangePoints([0,100],5)

console.log(ordinal.range())

当 padding那边距设置为5，那么当step * padding / 2 时，那么将会的出第一个圆的位置坐标，在下述 code 中：

1
2
3
4
5

var ordinal = d3.scale.ordinal()
	.domain([1,2,3,4,5])
	.rangePoints([0,200],5)

console.log(ordinal.range())

当 rangePoints替换为rangeRoundPoints()来四舍五入取整的数据，此时如果上述 code 输出55.55555555555，那么将会被四舍五入为56。就如四舍五入后的结果为56、78、100、122、144，那么我们从55.55555555555556 - 77.77777777777777可以得知，step为22.222222222222214，那么通过step * padding / 2 将会得出第一个结果的坐标。

RangeBands()

rangeBands()与rangePoints同样是代替 range()定义值域，与rangePoints类似，其分段方法为outerPadding、padding、outerPadding其中outerPadding主要是边界的空白参数（默认为0）。

1
2
3
4
5

var ordinal = d3.scale.ordinal()
	.domain([1,2,3,4,5])
	.rangeBands([0,200],2,3)

console.log(ordinal.range())

在上述的 code 中，我们首先定义了interval为[0,200]，将padding与outerPadding分别设置为2和3，那么输出的信息将会是最终是圆的位置坐标。那么最终经过计算，他的outerPadding与Padding分别22.22222222222223、22.222222222222214。通常从字面上意思来进行理解outherPadding就是圆开头与结尾处即两边的空白距离，就为outerPadding